<template>
    <el-row :gutter="20">
        <el-col :span="6">
        <el-form-item label="单据编号：" >
            <el-input v-model="form.number" placeholder="请输入单据编号" />
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="商品信息：" >
            <el-input v-model="form.keywords" placeholder="请输入条码、名称、规格、型号查询" />
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="单据日期：" >
            <div class="block">
                <el-date-picker
                style="width:90%"
                v-model="value2"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD hh:mm:ss"
                />
            </div>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item>
            <el-button type="primary" @click="getTableData()">查询</el-button>
            <el-button @click="resetQuery()" >重置</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-dropdown >
            <span v-if="queryShow==false"  @click="changeQueryShow(true)" class="el-dropdown-link">
                展开<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <span v-else @click="changeQueryShow(false)" class="el-dropdown-link">
                收起<el-icon class="el-icon--right"><arrow-up /></el-icon>
            </span>
            </el-dropdown>
        </el-form-item>
        </el-col>
    </el-row>
    
    <div v-show="queryShow">
        <el-row :gutter="20">
            <el-col :span="6">
            <el-form-item label="供应商：">
                <el-select v-model="form.organ_id" placeholder="请选择" clearable>
                  <el-option v-for="item in supplierList" :key="item.customerid" :label="item.customer"
                  :value="item.customerid" />
                </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="仓库名称：">
                <el-select v-model="form.depot_id" placeholder="请选择" clearable>
                <el-option v-for="item in warehouseList" :key="item.depot_id" :label="item.depot_name"
                :value="item.depot_id" />
                </el-select>
            </el-form-item>
            </el-col>
        </el-row>
    </div>

    <el-button type="primary" @click="AddProductInfo()">新增</el-button>
 <el-button @click="DeleteRange">批量删除</el-button>
 <el-button @click="DeleteRange">审核</el-button>
 <el-button @click="DeleteRange">反审核</el-button>
 <el-button @click="ExportProjectExcel">导出</el-button>
 <!--列设置-->
 <el-popover placement="right" width="300px" trigger="click">
  <template #reference>
    <el-button style="margin-right: 16px">列设置</el-button>
  </template>
  <table>
    <tbody>
    <tr>
      <td><el-checkbox label="供应商" v-model="Listheading.c1"/></td>
      <td><el-checkbox label="单据编号" v-model="Listheading.c2"/></td>
      <td><el-checkbox label="关联单据" v-model="Listheading.c3"/></td>
    </tr>
    <tr>
      <td><el-checkbox label="商品信息" v-model="Listheading.c4"/></td>
      <td><el-checkbox label="单据日期" v-model="Listheading.c5"/></td>
      <td><el-checkbox label="操作员" v-model="Listheading.c6"/></td>
    </tr>
    <tr>
      <td><el-checkbox label="数量" v-model="Listheading.c7"/></td>
      <td><el-checkbox label="金额合计" v-model="Listheading.c8"/></td>
      <td><el-checkbox label="备注" v-model="Listheading.c9"/></td>
    </tr>
    <tr>
      <td><el-checkbox label="状态" v-model="Listheading.c10"/></td>
    </tr>
  </tbody>
  </table>
    <div>
    恢复默认列配置：<el-link type="primary" @click="ResetCheckbox">恢复默认</el-link>
    </div>
  </el-popover>

  <!--列表显示-->
    <el-table border height="550" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="date" label="操作" width="180px">
            <template #default="scope" >
              <el-button type="text" @click="handleDelete(scope.row)">查看</el-button>
              <el-button type="text" @click="handleDelete(scope.row.productid)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">复制</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        <el-table-column v-if="Listheading.c1" prop="organ_name" label="供应商" />
        <el-table-column v-if="Listheading.c2" prop="number" label="单据编号" />
        <el-table-column v-if="Listheading.c3" prop="link_number" label="关联单据" />
        <el-table-column v-if="Listheading.c4" prop="product_info" label="商品信息" />
        <el-table-column v-if="Listheading.c5" prop="create_time" label="单据日期" />
        <el-table-column v-if="Listheading.c6" prop="username" label="操作员" />
        <el-table-column v-if="Listheading.c7" prop="total_num" label="数量" />
        <el-table-column v-if="Listheading.c8" prop="total_price" label="金额" />
        <el-table-column v-if="Listheading.c9" prop="remark" label="备注" />
        <el-table-column v-if="Listheading.c10" prop="statusstr" label="状态" >
          <template #default="scope">
            <el-tag v-if="scope.row.statusstr=='未审核'" type="danger">{{scope.row.statusstr}}</el-tag>
            <el-tag v-else type="success">{{scope.row.statusstr}}</el-tag>
          </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <div style="float:right">
        <el-pagination
        v-model:current-page="form.pageindex"
        v-model:page-size="form.pagesize"
        :page-sizes="[10,20,30]"
        layout="total, prev, pager, next, sizes"
        :total="pageShow.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
        </div>

    <el-dialog style="width: 80%;height:70%" v-model="dialogTableVisible" title="单据信息" destroy-on-close width="800">
      <AddWarehousing v-if="dosmthing==1" ></AddWarehousing>
      <UpdateWarehousing v-else-if="dosmthing==2" ></UpdateWarehousing>
      <CopyAddWarehousing v-else-if="dosmthing==3" ></CopyAddWarehousing>
    </el-dialog>
</template>

<script setup lang="ts">
import {reactive,ref,onMounted} from 'vue'
import {ElMessage,ElMessageBox} from 'element-plus'
import AddWarehousing from './AddWarehousing.vue'
import UpdateWarehousing from './UpdateWarehousing.vue'
import CopyAddWarehousing from './CopyAddWarehousing.vue'
import { GetOtherAddShow} from '@/api/otherwarehousing/index'
import { type OtherShowQuery} from '@/api/otherwarehousing/type'
import {GetSupplierList,  GetWarehouseList } from '@/api/Sales/index'

//查询单据日期
const value2 = ref('')
//导出
const ExportProjectExcel=()=>{
  location.href='http://localhost:5184/ProductData/ExportExcel'
}


//列设置绑定字段
const Listheading=reactive({
  c1:true,
  c2:true,
  c3:false,
  c4:true,
  c5:true,
  c6:true,
  c7:false,
  c8:true,
  c9:false,
  c10:true
})
//列设置恢复默认
const ResetCheckbox=()=>{
  Listheading.c1=true
  Listheading.c2=true
  Listheading.c3=false
  Listheading.c4=true
  Listheading.c5=true
  Listheading.c6=true
  Listheading.c7=true
  Listheading.c8=true
  Listheading.c9=false
  Listheading.c10=true
}

//控制弹框
const dialogTableVisible=ref(false)
const dosmthing=ref(1)
const AddProductInfo=()=>{
  dialogTableVisible.value=true
  dosmthing.value=1
}
//仓库列表
const warehouseList: any = ref([])
const getWarehouseList = async () => {
    await GetWarehouseList().then(res => {
        warehouseList.value = res.data;
    })
}
//供应商列表
const supplierList: any = ref([])
const getSupplierList = async () => {
    await GetSupplierList().then(res => {
        supplierList.value = res.data;
    })
}
const queryShow = ref(false)
//查询显示
const form=reactive<OtherShowQuery>({
    pagesize:10,
    pageindex:1,
    number:'',
    keywords:'',
    start_time:null,
    end_time:null,
    organ_id:null,
    depot_id:null
})
const resetQuery=()=>{
  form.pagesize=10
    form.pageindex=1
    form.number=''
    form.keywords=''
    form.start_time=null
    form.end_time=null
    form.organ_id=null
    form.depot_id=null
}
const pageShow=reactive({
  totalCount:0,
  totalPage:0
})

const tableData = ref([])
const getTableData = async () => {
  form.start_time=value2.value[0]
  form.end_time=value2.value[1]
  console.log(value2)
  console.log(form)
  await GetOtherAddShow(form)
    .then(res => {
      console.log(res.data.data)
      tableData.value = res.data.data
      pageShow.totalCount=res.data.totalCount
      pageShow.totalPage=res.data.totalPage
    })
}
const handleSizeChange = (val: number) => {
  form.pagesize=val
  form.pageindex=0
  getTableData()
}
const handleCurrentChange = (val: number) => {
  form.pageindex=val
  getTableData()
}
const changeQueryShow = (val:any) => {
    queryShow.value=val
}


const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
//删除
const handleDelete = (productvalue:any) => {
    ElMessageBox.confirm(
      '确认删除吗?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    .then(async() => {
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}

//批量删除
const DeleteRange=()=>{
  if(multipleSelection.value.length==0){
    ElMessage.error("至少选择一项删除")
    return
  }
    ElMessageBox.confirm(
      '确认删除吗?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    .then(async() => {
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}

onMounted(()=>{
  getTableData()
  getSupplierList()
  getWarehouseList()
})
</script>

<style scoped>
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>